<template>
    <div>
        <table class="amazon_page">
            <tr>
                <td>
                    <span>亚马逊收款账户申请单</span>
                </td>
                <td align="right">
                    <span class="text_blue" @click="goBack">返回</span>
                </td>
            </tr>
        </table>
        <hr style="height:0px; border-top:1px ridge rgb(233, 233, 233)">
        <nt-row :gutter="20">
            <nt-col :span="16">
                <div>
                    <span>提供亚马逊MWS信息是出于更好的保障您资金安全性的需要。我们需要核实您的亚马逊店铺信息，以符合中美监管合规要求。环球结汇的合作银行是国际大型商业银行，同时由第三方信托机构核实担保，为您的资金建立起更牢固的安全壁垒。您的亚马逊MWS信息受到隐私协议保护，未经您的授权，我们不会将此信息透露给任何第三方。</span>
                    <nt-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="170px" class="add_bank_card_form">
                        <nt-form-item label="店铺名称：" prop="shop_name">
                            <nt-input v-model="ruleForm.shop_name" placeholder="请输入店铺名称" :maxlength="40" />
                        </nt-form-item>
                        <nt-form-item label="Merchant Token：" prop="merchant_token">
                            <nt-input v-model="ruleForm.merchant_token" placeholder="请输入Merchant Token" :maxlength="40" />
                            <span class="text_blue" @click="toVerified">如何获取卖家记号</span>
                        </nt-form-item>
                        <nt-form-item label="AWS Access Key ID：" prop="aws_access_key_id">
                            <nt-input v-model="ruleForm.aws_access_key_id" placeholder="请输入AWS Access Key ID" :maxlength="40" />
                        </nt-form-item>
                        <nt-form-item label="Secret Key：" prop="secret_key">
                            <nt-input v-model="ruleForm.secret_key" placeholder="请输入Secret Key" :maxlength="40" />
                        </nt-form-item>
                        <nt-form-item label="亚马逊用户资料截图：" prop="amazon_account">
                            <nt-upload class="xbn-avatar-uploader" action="http://timage.xbniao.com/file/app/image.upload" :show-file-list="false" :on-success="handleAvatarSuccessAccount"
                                :before-upload="beforeAvatarUpload">
                                <img v-if="ruleForm.amazon_account" :src="ruleForm.amazon_account" class="avatar">
                                <i v-else class="nt-icon-plus avatar-uploader-icon"></i>
                            </nt-upload>
                            <span class="text_blue">查看亚马逊用户资料截图样板</span>
                        </nt-form-item>
                        <nt-form-item label="售卖产品截图：" prop="amazon_product">
                            <nt-upload class="xbn-avatar-uploader" action="http://timage.xbniao.com/file/app/image.upload" :show-file-list="false" :on-success="handleAvatarSuccessProduct"
                                :before-upload="beforeAvatarUpload">
                                <img v-if="ruleForm.amazon_product" :src="ruleForm.amazon_product" class="avatar">
                                <i v-else class="nt-icon-plus avatar-uploader-icon"></i>
                            </nt-upload>
                            <span class="text_blue">查看亚马逊售卖产品资料截图样板</span>
                        </nt-form-item>
                    </nt-form>
                    <div align="center">
                        <nt-button class="add_bank_card_next" type="success" @click="submitForm()">{{submit_text}}
                        </nt-button>
                    </div>
                </div>
            </nt-col>
            <nt-col :span="8">
                <div>
                    <span>第一步：</span>
                    </br>
                    <span>点击</span>
                    <span class="text_blue">https://www.baidu.com/</span>
                    <span>登录亚马逊美国站，并点击‘Sign up for MWS’。</span>
                    </br>
                    <img src="../../images/default_img.jpg">
                    </br>
                    <span>第二步：</span>
                    </br>
                    <span>登录amazon账户。</span>
                    </br>
                    <img src="../../images/default_img.jpg">
                    </br>
                    <span>第三步：</span>
                    </br>
                    <span>选择‘I Want to access my own Amazon seller account with MWS’ 后点击‘next’。</span>
                    </br>
                    <img src="../../images/default_img.jpg">
                    </br>
                    <span>第四步：</span>
                    </br>
                    <span>申请成功，获取Seller ID,Marketplace ID,AWS Access Key ID,Secret Key等信息，填写到申请表中。</span>
                    </br>
                    <img src="../../images/default_img.jpg">
                </div>
            </nt-col>
        </nt-row>
    </div>
</template>
<style scoped>
    .amazon_page {
        width: 800px;
        height: 30px;
        margin: 10px auto;
    }

    .add_bank_card_form {
        width: 625px;
        margin: 20px auto;
    }

    .add_bank_card_next {
        width: 350px;
        margin-left: 150px;
    }

    .text_blue {
        cursor: pointer;
        color: rgb(59, 166, 211);
    }

    .text_gray {
        color: #8c939d;
    }

    .xbn-avatar-uploader .nt-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .xbn-avatar-uploader .nt-upload:hover {
        border-color: #20a0ff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
<script>
    export default {
        data() {
            return {
                ruleForm: {
                    shop_name: '',
                    merchant_token: '',
                    aws_access_key_id: '',
                    secret_key: '',
                    amazon_account: '',
                    amazon_product: '',
                },
                rules: {
                    shop_name: [
                        { required: true, message: '请输入店铺名称', trigger: 'blur' },
                    ],
                    merchant_token: [
                        { required: true, message: '请输入Merchant Token', trigger: 'blur' },
                    ],
                    aws_access_key_id: [
                        { required: true, message: '请输入AWS Access Key ID', trigger: 'blur' },
                    ],
                    secret_key: [
                        { required: true, message: '请输入Secret Key', trigger: 'blur' },
                    ],
                    amazon_account: [
                        { required: true, message: '请添加亚马逊用户资料截图', trigger: 'change' },
                    ],
                    amazon_product: [
                        { required: true, message: '请添加售卖产品截图', trigger: 'change' },
                    ],
                },
                loading: false,
                disable: false,
                submit_text: '提交申请',
            }
        },
        methods: {
            submitForm() {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleAvatarSuccessAccount(res, file) {
                this.ruleForm.amazon_account = URL.createObjectURL(file.raw);
                this.submitForm();
            },
            handleAvatarSuccessProduct(res, file) {
                this.ruleForm.amazon_product = URL.createObjectURL(file.raw);
                this.submitForm();
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            toVerified() {
                // this.$router.push('/main/verified');
                alert('如何获取卖家记号');
            },
            goBack() {
                this.$router.go(-1);
            }
        }
    }
</script>